const gulp = require('gulp');
const babel = require('gulp-babel'); // es6转为es5语法
const concat = require('gulp-concat'); // 文件合并
const uglify = require('gulp-uglify'); // js压缩
const sass = require('gulp-sass'); // sass编译
const htmlmin = require('gulp-htmlmin'); // html压缩
const connect = require('gulp-connect'); // 起server服务
const imagemin = require('gulp-imagemin'); // 图片压缩
const del = require('del'); // 清空目录
const cleanCss = require('gulp-clean-css'); // css压缩

// 清空dist目录
gulp.task('clean', async () => {
    console.log("clean")
    await del(['./dist'])
});
// html压缩公共函数
const htmlMin = () => {
    return gulp.src('./index.html')
        .pipe(htmlmin({
            collapseInlineTagWhitespace: true,
        }))
        .pipe(gulp.dest('dist'))
};
const cssMin = () => {
    console.log("cssMin")
    return gulp.src(['./src/css/*.scss', './src/css/*.css'])
             .pipe(sass())
             .pipe(concat('style.min.css'))
             .pipe(cleanCss())
             .pipe(gulp.dest('./dist/src/css'))
};

const jsMin = () => {
    console.log("jsMin")
    return gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env'] //es6转es5插件  presets：转码规则
        }))
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/src/js'))
};
const imageMin = () => {
    console.log("imageMin")
    return gulp.src('./src/img/*.png')
        .pipe(imagemin())// 图片压缩
        .pipe(gulp.dest('./dist/src/img'))
};

/**********************开发环境********************* */
// :dev task，用于开发环境下，浏览器自动刷新
gulp.task('html:dev', async () => {
    await htmlMin().pipe(connect.reload());
});

gulp.task('css:dev', async () => {
    console.log("css:dev")
    await cssMin().pipe(connect.reload())
});
gulp.task('js:dev', async() => {
    await jsMin().pipe(connect.reload());
  });


gulp.task('image:dev', async () => {
    await imageMin().pipe(connect.reload())
});

/***********************生产环境******************** */
gulp.task('html:build', async () => {
    await htmlMin();
})
gulp.task('css:build', async () => {
    console.log("css:build")
    await cssMin();
});
gulp.task('js:build', async () => {
    await jsMin();
});
gulp.task('image:build', async () => {
    await imageMin();
});

/***********************util操作******************** */
// server任务，目录为dist，入口文件为dist/index.html，port 8080
gulp.task('server', () => {
    connect.server(
        {
            root: './dist',
            port: 8080,
            livereload: true
        }
    )
});

// watch任务，监听源文件变化，执行对应开发任务
gulp.task('watch', () => {
    console.log("watch");
    gulp.watch(['./src/css/*.css', './src/css/*.scss'], gulp.series('css:dev'));
    console.log("css");
    gulp.watch('./src/js/*.js', gulp.series('js:dev'));
    console.log("js");
    gulp.watch('./index.html', gulp.series('html:dev'));
    console.log("html");
    gulp.watch('./src/img/*.png', gulp.series('image:dev'));
    console.log("img");
});

//parallel 并行 series：按照顺序执行
// dev任务，启动开发环境
gulp.task('dev', gulp.series(gulp.parallel('watch', 'server')));

// build任务，用于生产环境下打包压缩源代码
gulp.task('build', gulp.series('clean', gulp.parallel('html:build', 'js:build', 'css:build', 'image:build')))